<template>
    <el-dialog :model-value="show" title="编辑项目" width="80%" align-center
               :close-on-click-modal="false" @close="shut"
               destroy-on-close append-to-body>
        <el-form v-loading="loading" ref="projectRef" :model="project" :rules="rules"
                 label-width="170px" status-icon label-position="left"
        >
            <el-form-item label="项目logo" prop="logo">
                <Logo :id="id" :logo="project.logo" @reload="getProject()"/>
                <div style="margin-left: 1em">
                    格式为png,jpg或jpeg，不超过2M，文件数量限一个。
                </div>
            </el-form-item>
            <el-divider><span style="display: flex;align-items: center"><el-icon><StarFilled/></el-icon>基本信息<el-icon><StarFilled/></el-icon></span>
            </el-divider>
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="project.name" clearable/>
            </el-form-item>
            <el-form-item label="项目类型" prop="types">
                <el-select v-model="project.types" placeholder="请选择">
                    <el-option value="创新训练项目"/>
                    <el-option value="创业训练项目"/>
                    <el-option value="创业实践项目"/>
                </el-select>
            </el-form-item>
            <el-form-item label="所属批次" prop="batch">
                <el-autocomplete clearable placeholder="请输入所属批次"
                                 v-model="project.batch" :fetch-suggestions="querySearch"
                />
            </el-form-item>
            <el-form-item label="所属领域" prop="tags">
                <el-checkbox-group :max="3" size="" v-model="project.tags">
                    <el-checkbox-button v-for="tag in tags" :key="tag" :label="tag"/>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="项目简介" prop="profiles">
                <el-input type="textarea" :rows="4" :minlength="100" :maxlength="1000" show-word-limit
                          placeholder="可拆分为产品描述、用户群体、项目愿景、竞争对手等方面详细描述，不少于100字，但不超过1000字"
                          v-model="project.profiles"/>
            </el-form-item>
            <el-form-item label="学校科技成果转化" prop="achievementIsTransform">
                <template #label>
                    <span>
                        学校科技成果转化
                        <el-tooltip trigger="hover" placement="top"
                                    content="学校科技成果转化项目是指创业团队所使用核心科技成果的所有权是学校的项目">
                            <el-button link><el-icon><InfoFilled/></el-icon></el-button>
                        </el-tooltip>
                    </span>
                </template>
                <el-radio-group v-model="project.achievementIsTransform">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="参赛申报人为科技成果的第一完成人或所有人" prop="declarerIsAchievementOwner">
                <el-radio-group v-model="project.declarerIsAchievementOwner">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="项目成熟度" min-width="150" prop="maturity">
                <template #default="scope">
                    <el-tag v-if="!project.types" disabled>请先选择项目类型</el-tag>
                    <div v-else>
                        <el-tag :type="project.maturity? '':'danger'">{{ project.maturity }}</el-tag>
                        <el-button size="small" type="primary" style="margin-left: 1rem"
                                   @click="maturityDialog.visible = true">请选择</el-button>
                    </div>
                </template>
            </el-form-item>
            <el-form-item prop="grade" label="立项等级">
                <el-select v-model="project.grade" placeholder="请选择">
                    <el-option :value="0" label="校级"/>
                    <el-option :value="1" label="省级"/>
                    <el-option :value="2" label="国家级"/>
                </el-select>
            </el-form-item>
            <el-form-item prop="projectEntryStatus" label="项目进度">
                <el-select v-model="project.projectEntryStatus" placeholder="请选择">
                    <el-option v-for="(status,index) in entryStatus" :value="index"  :label="status"  />
                </el-select>
            </el-form-item>
            <el-form-item prop="remark" label="项目备注">
                <el-input clearable placeholder="项目备注" v-model="project.remark" type="textarea" :rows="4"/>
            </el-form-item>
            <span class="info-footer">
                <el-button type="primary" @click="submitForm(projectRef)">提交</el-button>
            </span>
            <el-divider><span style="display: flex;align-items: center"><el-icon><StarFilled/></el-icon>团队成员<el-icon><StarFilled/></el-icon></span>
            </el-divider>
            <el-form-item prop="studentNumber">
                <template #label>
                    <span>
                        参与学生数
                        <el-tooltip trigger="hover" placement="top"
                                    content="参与学生数不包括负责人自己(创建项目者)，且确定后将无法修改!">
                            <el-button link><el-icon><InfoFilled/></el-icon></el-button>
                        </el-tooltip>
                    </span>
                </template>
                <el-input-number :min="0" disabled v-model="project.studentNumber"/>
            </el-form-item>
            <el-form-item label="参与学生">
                <InviteStudent :id="id"/>
            </el-form-item>
            <el-form-item label="第一指导教师">
                <InviteHostInstructor :id="id"/>
            </el-form-item>
            <el-form-item label="第二指导教师">
                <InviteInstructor :id="id"/>
            </el-form-item>
            <el-divider><span style="display: flex;align-items: center"><el-icon><StarFilled/></el-icon>所属文件<el-icon><StarFilled/></el-icon></span>
            </el-divider>
            <el-form-item label="项目文件">
                <Resource :id="id"/>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog v-model="maturityDialog.visible" :append-to-body='true' :title="maturityDialog.title" width="80%"
               @close="maturityDialog.visible = false">
        <el-table highlight-current-row table-layout="fixed"
                  :data="maturities" @current-change="rowClick">
            <el-table-column align="center" width="55">
                <template #default="scope">
                    <el-radio :model-value="project.maturity" :label="scope.row.value">{{}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="value" label="成熟度" witdh="100" align="center"/>
            <el-table-column prop="standard" label="判断标准" min-width="500" align="center"/>
            <el-table-column prop="need" label="支撑材料" width="500" align="center"/>
        </el-table>
    </el-dialog>
</template>

<script setup>
import {computed, reactive, ref, watch} from 'vue'

//api
import {getProjectByIdApi, updateProjectApi,} from "@/apis/project";
import {InfoFilled, StarFilled} from "@element-plus/icons-vue";

import Logo from "@/views/User/MyProject/EditProject/components/Logo.vue";
import Resource from "@/views/User/MyProject/EditProject/components/Resource.vue";

import InviteHostInstructor from "@/views/User/MyProject/EditProject/components/InviteHostInstructor.vue";
import InviteStudent from "@/views/User/MyProject/EditProject/components/InviteStudent.vue";
import InviteInstructor from "@/views/User/MyProject/EditProject/components/InviteInstructor.vue";
import {
    getMaturityEntrepreneurship,
    getMaturityInnovation,
    getProjectBatches,
    getProjectEntryStatus,
    getProjectTags
} from "@/apis/enum";

const props = defineProps(["id", "show"])
const emits = defineEmits(["update:show", "reload"])

//TODO 暂时同步获取,异步没有接口
const batches = ref(getProjectBatches())

// getBatchesApi().then((
//     res => batches.value = res
// ))
//暂时同步获取,缺少接口
const tags = getProjectTags()
// getSearchTagsApi().then((
//     res => tags.value = res.data
// ))
//项目进度
const entryStatus = getProjectEntryStatus()

let loading = ref(true)
//新建项目
let projectRef = ref()

//项目信息
let project = ref({})
const maturities = computed(() => {
    if (!project.value.types) return []
    return project.value.types === "创新训练项目" ? getMaturityInnovation() : getMaturityEntrepreneurship()
})
const maturityDialog = reactive({
    visible: false,
    title: "选择成熟度"
})
const rowClick = row => {
    console.log(row)
    project.value.maturity = row.value
    maturityDialog.visible = false
}
const getProject = async () => {
    const res = await getProjectByIdApi(props.id)
    project.value = res.data
    console.log(res.data)
    loading.value = false
}
//监视编辑框是否打开,打开则获取项目数据
watch(() => props.show, value => {
    if (value === true) getProject()
})

let rules = {
    name: [{required: true, message: '项目名称不能为空!', trigger: ['blur','change']}],
    types: [{required: true, message: '项目类型不能为空!', trigger: ['blur','change'],}],
    batch: [{required: true, message: '项目批次不能为空!', trigger: ['blur','change'],}],
    tags: [{required: true, message: '项目所属领域不能为空!', trigger: ['blur','change']}],
    grade: [{required: true, message: '项目立项等级不能为空!', trigger: ['blur','change']}],
    profiles: [
        {required: true, message: '项目简介不能为空', trigger: ['blur','change']},
        {required: true, min: 100, message: '至少100字', trigger: ['blur','change']},
    ],
    achievementIsTransform: [{required: true, message: '学科科技成果转化不能为空', trigger: ['blur','change'],}],
    declarerIsAchievementOwner: [{required: true, message: '参赛申报人为科技成果的第一完成人或所有人不能为空', trigger: ['blur','change'],}],
    maturity: [{required: true, message: '项目成熟度不能为空', trigger: ['blur','change'],}],
    projectEntryStatus: [{required: true, message: '项目进度不能为空', trigger: ['blur','change'],}]
}

const submitForm = formEl => {
    if (!formEl) return
    formEl.validate(async valid => {
        if (valid) {
            loading.value = true
            await updateProjectApi(project.value)
            ElMessage.success("基本信息编辑成功")
            await getProject()
            emits("reload")
        }
    })
}

const shut = () => {
    project.value = {}
    emits("update:show", false)
}

const querySearch = async (queryString, cb) => {
    const results = queryString
        ? batches.value.filter(createFilter(queryString))
        : batches.value
    cb(results)
}
const createFilter = (queryString) => {
    return (batch) => {
        return (
            batch.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
</script>

<style scoped>
.info-footer {
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}

.el-form-item {
    margin-bottom: 20px;
}
:deep(.el-form-item__label) {
    line-height: normal;
}

:deep(.el-checkbox-button .el-checkbox-button__inner) {
    border: 1px solid #DCDFE6;
    margin: 0 1em 1em 0;
    border-radius: 4px;
}

:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
    border: 1px solid #409EFF;
}
</style>